<script setup>
import { message } from 'ant-design-vue';
import { DownOutlined } from '@ant-design/icons-vue';
import { REQU, toFormData, useResp } from '@/net/requ.js';
import router from '@/router/index.js';
const userInfo = JSON.parse(localStorage.getItem('userInfo'));

function signOut() {
  return REQU('/api/web/logout', {
    method: 'POST',
    body: toFormData({ accessToken: localStorage.getItem('accessToken') })
  })
  .then(useResp({
    succ: result => {
      message.info('已退出登录');
      R.compose( R.forEach(k => localStorage.removeItem(k)), R.without(['acctSignIn']), R.keys )(localStorage);
      router.push('/sign-in');
    },
  }))
}
</script>

<template>
  <a-dropdown>
    <div class="ant-dropdown-link" @click.prevent>
      {{ userInfo?.realName ?? '--' }}
      <down-outlined />
    </div>
    <template #overlay>
      <a-menu>
        <a-menu-item>
          <a href="javascript:;">账号设置</a>
        </a-menu-item>
        <a-menu-item>
          <a href="javascript:;">权限配置</a>
        </a-menu-item>
        <a-menu-item>
          <a href="javascript:;" @click="() => signOut()">退出登录</a>
        </a-menu-item>
      </a-menu>
    </template>
  </a-dropdown>
</template>

<style>
.sys-header .ant-dropdown-link {
  font-size: 16px;
  cursor: default;
}
</style>
